<script setup lang="ts">
import { articleLike } from '@/api/article'
import { getArticle } from '@/utils/publicMethods'
import useStore from '@/store'
import { ArticleVo } from '@/api/article/type'
import { PropType } from 'vue'

const store = useStore()

// 定义父组件传递的属性类型
const props = defineProps({
  dataList: {
    type: Object as PropType<Array<ArticleVo>>,
    default: () => <ArticleVo[]>[]
  },
  isNeedLoadMore: {
    type: Boolean,
    default: () => true
  },
  loading: {
    type: Boolean,
    default: () => false
  },
  autoLoad: {
    type: Boolean,
    default: () => true
  }
})

const emit = defineEmits(['loadMore'])

const { dataList, isNeedLoadMore, loading, autoLoad } = toRefs(props)

/** 文章点赞 */
function clickLike(val: ArticleVo) {
  articleLike(val.id).then(({ data: res }) => {
    if (res.code === 200) {
      for (let i = 0; i < dataList.value.length; i++) {
        if (dataList.value[i].id === val.id) {
          dataList.value[i].clickLike = !dataList.value[i].clickLike
          if (dataList.value[i].clickLike) {
            // 点赞
            dataList.value[i].likeCount += 1
          } else {
            // 取消点赞
            dataList.value[i].likeCount -= 1
          }
        }
      }
    }
  })
}

/** 是否展示标签 */
const isTagShow = (tags: string, id: number) => {
  return tags && tags.split(',').map(Number).includes(id)
}

/** 滚动事件: 1.如果移动到了文章列表底部，则根据情况判断是否需要加载更多 */
const handleScroll = () => {
  // 如果正在加载数据，就不进行处理
  if (loading.value || !autoLoad.value) return

  if (isNeedLoadMore.value) {
    const dataListEl = document.getElementById('data-list')
    if (dataListEl) {
      const toBottom = dataListEl.getBoundingClientRect().bottom - window.innerHeight
      if (toBottom <= 0) {
        emit('loadMore')
      }
    }
  }
}

// 手动加载
const manualLoad = () => {
  emit('loadMore')
}

/** 监听数据变动 */
watch(
  () => dataList.value,
  () => {
    loading.value = false
  }
)

onMounted(() => {
  // 开启滚动事件
  window.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  // 移除滚动事件
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <!--电脑端-->
  <div class="article-list-container">
    <div id="data-list">
      <el-card
        v-for="article in dataList"
        :key="article"
        v-loading="loading"
        class="article-card"
        shadow="hover"
      >
        <div class="article-item">
          <el-image
            fit="cover"
            :src="article.cover"
            class="image"
            @click="getArticle(article.id)"
          />
          <div class="article-content">
            <el-link class="article-link" :underline="false">
              <h2 class="text-show" @click="getArticle(article.id)">
                <svg-icon v-if="article.isTop" icon-class="top" />
                {{ article.title }}
              </h2>
            </el-link>
            <span class="article-summary text-show">
              {{ article.summary }}
            </span>
            <span class="article-data">
              <!--文章特征-->
              <span class="feature-info">
                <el-space size="small">
                  <!--头像-->
                  <el-avatar size="small" :src="article.avatar" />
                  <!--昵称-->
                  <span v-if="article.nickName" class="text-xs">{{ article.nickName }}</span>
                  <!--用户名-->
                  <span v-else class="text-xs">{{ article.username }}</span>
                  <!--分类-->
                  <el-tag size="small">{{ article.categoryName }}</el-tag>
                  <!--标签列表-->
                  <template v-for="(item, index) in store.tags">
                    <el-tag
                      v-if="isTagShow(article.tags, item.id)"
                      :key="index"
                      style="margin-right: 4px"
                      type="success"
                      size="small"
                      :label="index"
                      border
                      >{{ item.name }}
                    </el-tag>
                  </template>
                </el-space>
              </span>
              <!--文章数据-->
              <el-space alignment="center">
                <!--浏览量-->
                <span class="text-xs font-number text-color">
                  <svg-icon icon-class="eye-light" style="font-size: 15px" />
                  {{ article.viewCount }}
                </span>
                <!--评论数-->
                <span class="text-xs font-number text-color">
                  <svg-icon icon-class="message" style="font-size: 15px" />
                  {{ article.commentCount }}
                </span>
                <!--点赞数-->
                <span class="text-xs font-number" @click="clickLike(article)"
                  ><svg-icon
                    :icon-class="article.clickLike ? 'give-dark' : 'give-light'"
                    style="font-size: 15px; cursor: pointer"
                    :style="{ color: article.clickLike ? '#fd5a5a' : '' }"
                  />
                  {{ article.likeCount }}
                </span>
              </el-space>
            </span>
          </div>
        </div>
      </el-card>
    </div>
    <!--加载展示-->
    <div style="text-align: center">
      <el-button v-if="isNeedLoadMore && !autoLoad" text round type="primary" @click="manualLoad">
        加载更多
      </el-button>
      <el-button v-else text disabled>没有更多了</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*手机端*/
@media screen and (max-width: 759px) {
  .article-card {
    border-radius: 10px;
    &:nth-child(n + 2) {
      margin-top: 10px;
    }
    .article-item {
      display: flex;
      flex-direction: column;
      .image {
        border-radius: 10px;
        width: 100%;
        max-height: 180px;
      }
      .article-content {
        display: flex;
        flex-direction: column;
        justify-content: left;
        .article-link {
          justify-content: left;
        }
        .article-summary {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .article-data {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .feature-info {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
/*电脑端 */
@media screen and (min-width: 760px) {
  .article-list-container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .article-card {
    max-height: 180px;
    padding: 20px 0 20px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    &:nth-child(n + 2) {
      margin-top: 20px;
    }
    &:hover {
      filter: drop-shadow(0 0 0.5em rgb(191, 212, 252));
      transform: scale(1.01);
    }
    .article-item {
      display: flex;
      flex-direction: row;
      .article-content {
        margin-left: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .article-link {
          justify-content: left;
        }

        .article-summary {
          font-size: 14px;
        }
        .article-data {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .feature-info {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .image {
    border-radius: 10px;
    min-width: 238px;
    height: 140px;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
<!--公共CSS-->
<style lang="scss" scoped>
#data-list {
  margin-bottom: 10px;
}
</style>
